import React from "react";
import type { RefObject, ReactEventHandler } from "react";
class ProxyEvent extends React.Component {
  parentRef: RefObject<any>;
  childRef: RefObject<any>;
  constructor(props: {} | Readonly<{}>) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log("父元素原生冒泡");
      },
      false
    );
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log("父元素原生捕获");
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log("子元素原生冒泡");
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log("子元素原生捕获");
      },
      true
    );
    document.addEventListener(
      "click",
      () => {
        console.log("document原生事件冒泡");
      },
      false
    );
    document.addEventListener(
      "click",
      () => {
        console.log("document原生事件捕获");
      },
      true
    );
  }
  parentBubble = () => {
    console.log("父元素React事件冒泡");
  };
  parentCapture = () => {
    console.log("父元素React事件捕获");
  };
  childBubble = () => {
    console.log("子元素React事件冒泡");
  };
  childCapture = (e: any) => {
    console.log("e:", e);
    e.nativeEvent.stopPropagation();
    console.log("子元素React事件捕获");
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.parentBubble}
        onClickCapture={this.parentCapture}
      >
        <button
          ref={this.childRef}
          onClick={this.childBubble}
          onClickCapture={this.childCapture}
        >
          onClick
        </button>
      </div>
    );
  }
}

export default ProxyEvent;
